網頁學習30天 day28

2023 iThome 鐵人賽

DAY 28

自我挑戰組

網頁學習30天系列第 28 篇

15th鐵人賽

andylin@@

團隊原神啟動！

2023-10-13 01:06:15

299 瀏覽

分享至

上次我們使用自定義模塊來寫了簡易的加減乘除功能，今天我把它變的實際可以操作，我使用了express模組處理後端，再透過html、css以及javascript來處理前端。
首先建立 Node.js 應用程式入口檔案：建立一個名為 "app.js" 的 Node.js 檔案，該檔案將作為應用程式的進入點。在這個檔案中，我們引入 Express.js 並建立一個 Express 應用程式，設定靜態檔案目錄（"public" 資料夾）以提供前端資源，並設置一個路由來處理根路徑的 GET 要求。最後，我們在埠口 3000 上啟動伺服器。

建立前端界面：在 "public" 資料夾中建立一個 "index.html" 檔案，該檔案包含了 Web 計算機的前端使用者介面。它包括一個標題、一個用於顯示計算機輸入和輸出的文字框，以及數字和運算符按鈕。每個按鈕都帶有一個 "onclick" 事件處理程序，用於回應使用者的點擊操作。

JavaScript 互動：在 "index.html" 檔案中，我們使用 JavaScript 處理使用者的輸入並顯示計算結果。以下是 JavaScript 函數的作用：

addToDisplay(value)：當使用者點擊數字按鈕或運算符按鈕時，將按鈕上的值附加到文字框的值上。

clearDisplay()：清除文字框的內容。

calculate()：嘗試使用 JavaScript 的 "eval" 函數執行文字框中的表達式，然後將結果顯示在文字框中。如果出現錯誤，將顯示 "Error"。

最後啟動伺服器：使用 "node app.js" 命令啟動 Node.js 伺服器，該伺服器將在 http://localhost:3000 上運行。
app.js:

const express = require('express');
const app = express();
const path = require('path');

app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

前端部分:

<!DOCTYPE html>
<html>
<head>
  <title>Web Calculator</title>
</head>
<body>
  <h1>Web Calculator</h1>
  <input type="text" id="display" disabled>
  <div>
    <button onclick="addToDisplay('7')">7</button>
    <button onclick="addToDisplay('8')">8</button>
    <button onclick="addToDisplay('9')">9</button>
    <button onclick="addToDisplay('+')">+</button>
  </div>
  <div>
    <button onclick="addToDisplay('4')">4</button>
    <button onclick="addToDisplay('5')">5</button>
    <button onclick="addToDisplay('6')">6</button>
    <button onclick="addToDisplay('-')">-</button>
  </div>
  <div>
    <button onclick="addToDisplay('1')">1</button>
    <button onclick="addToDisplay('2')">2</button>
    <button onclick="addToDisplay('3')">3</button>
    <button onclick="addToDisplay('*')">*</button>
  </div>
  <div>
    <button onclick="addToDisplay('0')">0</button>
    <button onclick="clearDisplay()">C</button>
    <button onclick="calculate()">=</button>
    <button onclick="addToDisplay('/')">/</button>
  </div>
  <script>
    const display = document.getElementById('display');

    function addToDisplay(value) {
      display.value += value;
    }

    function clearDisplay() {
      display.value = '';
    }

    function calculate() {
      try {
        display.value = eval(display.value);
      } catch (error) {
        display.value = 'Error';
      }
    }
  </script>
</body>
</html>

使用畫面: